巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+城市分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

html5饕餮蛇游戏利用63行代码完善完成

0
一佰互联网站扶植(www.taishanly.com) 宣布时候:2020-04-20 08:56:53 阅读数: 93
之前也很少存眷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>
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。比来几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:HTML中利用SVG与SVG预约义外形元素先容
下一篇: html5若何实时更新缓存文件(js、css或图片)
[前往消息列表]

相干消息more

01
05月
帖几个PHP的无穷分类完成设法~

1、做网站的普通城市碰到处置分类的题目,偶来帖几个处置无穷分类的例子数据库的布局很简略: id,fatcher_id,name,......... >>概况

04
05月
站长流量暴跌技能揭密

流量是站长的性命,不流量就不钱。为了流量,列位站长是使出了满身解数,做告白、发帖子、骗点击、种木马、做黑客,能想的体例都想了,但是到最初... >>概况

24
05月
浅析已有各类首要网站扶植体例的好坏性

浅析已有各类首要网站扶植体例的好坏性大多站长在谈到网站扶植能够信口开河的是建站公司,大师能够会以为只要这类专业、有手艺含量的建站体例能力够称... >>概况

08
04月
设想师若何度过最艰巨的前三年?来看先辈的经历

@做设想的面条 :我比来收到了良多任务1-3年的面粉们发来的乞助,他们有的将简历和作品集发进来后就石沉了大海,有的好不轻易找到了新任务却还没... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站