html5嘴馋蛇手机游戏应用63行编码完善完成

日期:2021-02-25 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

之前也非常少关心html5,觉得挑选html早已渐渐地变成发展趋势,想掌握下。就找了个手机游戏学习培训了,写完这个手机游戏觉得html5和js融合很密不可分,假如js并不是非常好。估算必须先补习下js,这个只是本人的提议,不1定精确。也有1个便是,逻辑思维和逻辑性要非常清晰,要不然写手机游戏将会很痛楚。

嘴馋蛇,最关键的作用点: 1,蛇的挪动 2,更改蛇的方位 3,置放食材 4,提升舍生 5,如何挂的。

第1次写手机游戏,第1次写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(); //删掉数字能量数组第1项,而且回到原元素
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>