zoukankan      html  css  js  c++  java
  • [置顶] 63行代码完美实现html5 贪吃蛇游戏

          以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下。就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好。估计需要先补习下js,这个只是个人的建议,不一定准确。还有一个就是,思维和逻辑要特别清楚,不然写游戏可能很痛苦。

         贪吃蛇,最主要的功能点: 1,蛇的移动        2,改变蛇的方向    3,放置食物   4,增加舍身  5,怎么挂的。

         第一次写游戏,第一次写html5  感觉还是很吃力的。写完了,给大家分享下。互相交流.............不懂的或者有建议的,可以留言给我。。。代码很短,就60行。

    不过这个是个半成品,等写完成了。再更新下

    <!DOCTYPE HTML>
    <html>
    <body>
    <canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas>
    <script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var time = 160 ; //蛇的速度
    var cxt=c.getContext("2d");
    var x = y = 8;
    var a = 0; //食物坐标
    var t = 20; //舍身长
    var map = []; //记录蛇运行路径
    var size = 8; //蛇身单元大小
    var direction = 2;   // 1 向上  2 向右   0 左   3下
    interval = window.setInterval(set_game_speed, time);   // 移动蛇
    function set_game_speed(){   // 移动蛇
    	switch(direction){
    		case 1:y = y-size;break;
    		case 2:x = x+size;break;
    		case 0:x = x-size;break;
    		case 3:y = y+size;break;
    	}
    	if(x>400 || y>400 || x<0  || y<0){
        	alert("你挂了,继续努力吧!失败原因:碰壁了.....");window.location.reload(); 
        }
    	for(var i=0;i<map.length;i++){
    		if(  parseInt(map[i].x)==x && parseInt(map[i].y)==y){
    			alert("你挂了,继续努力吧!失败原因:撞到自己了.....");window.location.reload(); 
    		}
    	}
    	if (map.length>t) {  //保持舍身长度
    		var cl = map.shift();  //删除数组第一项,并且返回原元素
    		cxt.clearRect(cl['x'], cl['y'], size, size);
    	};
        map.push({'x':x,'y':y});  //将数据添加到原数组尾部
    	cxt.fillStyle = "#006699";//内部填充颜色
    	cxt.strokeStyle = "#006699";//边框颜色
    	cxt.fillRect(x, y, size, size);//绘制矩形
    	if((a*8)==x && (a*8)==y){  	//吃食物
    		rand_frog();t++;
        }
    }
    document.onkeydown = function(e) {  //改变蛇方向
    	var code = e.keyCode - 37;
    	switch(code){
    		case 1 : direction = 1;break;//上
    		case 2 : direction = 2;break;//右
    		case 3 : direction = 3;break;//下
    		case 0 : direction = 0;break;//左
    	}
    }
    // 随机放置食物
    function rand_frog(){
    	a = Math.ceil(Math.random()*50);
    	cxt.fillStyle = "#000000";//内部填充颜色
    	cxt.strokeStyle = "#000000";//边框颜色
    	cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形
    }
    // 随机放置食物
    rand_frog();
    </script>
    </body>
    </html>
    


  • 相关阅读:
    【Codechef】Chef and Bike(二维多项式插值)
    USACO 完结的一些感想
    USACO 6.5 Checker Challenge
    USACO 6.5 The Clocks
    USACO 6.5 Betsy's Tour (插头dp)
    USACO 6.5 Closed Fences
    USACO 6.4 Electric Fences
    USACO 6.5 All Latin Squares
    USACO 6.4 The Primes
    USACO 6.4 Wisconsin Squares
  • 原文地址:https://www.cnblogs.com/snake-hand/p/3155460.html
Copyright © 2011-2022 走看看