游戏进行页面展示

GAME  OVER 页面展示

 代码如下：

<!doctype html>
<html>
 
<body>
 
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
 
<script>
 
var sn = [42, 41],
dz = 43,
fx = 1,
n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [-1, -20, 1, 20][(e || event).keyCode - 37] || fx) ? fx : n
};
! function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) > 0 || n < 0 || n > 399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
draw(dz, "Yellow");
} else
draw(sn.pop(), "Black");
setTimeout(arguments.callee, 130);
}();
 
</script>
 
</body>
</html>

用最少的JS代码写出贪吃蛇游戏---迷你版的更多相关文章

  1. Python写的贪吃蛇游戏例子

    第一次用Python写这种比较实用且好玩的东西,权当练手吧 游戏说明: * P键控制“暂停/开始”* 方向键控制贪吃蛇的方向 源代码如下: 复制代码代码如下: from Tkinter import ...

  2. 关于用Java写的贪吃蛇游戏的一些感想

    学习Java有那么一个月了,兴趣还是挺高的.然而最近老师布置的一个迷宫问题,着实让我头疼了一两个礼拜,以至于身心疲惫,困扰不安.无奈,暂且先放下这个迷宫问题,写个简单点的贪吃蛇程序,以此来提高低落的情 ...

  3. js编写简单的贪吃蛇游戏

    css代码 *{ margin:; padding:; } td{ width: 4px; height: 4px; background: #ccc; border: 2px solid #ccc; ...

  4. 同事上班时间无聊，用python敲出贪吃蛇游戏打发时间

    自从学会啦python,再也不用担心上班时间老板发现我打游戏啦 贪吃蛇代码: 还有不懂的(https://www.ixigua.com/i6808019824560570888/)这里有视频教程. 如 ...

  5. python 写一个贪吃蛇游戏

    #!usr/bin/python #-*- coding:utf-8 -*- import random import curses s = curses.initscr() curses.curs_ ...

  6. 程序员面试京东前端，现场JavaScript代码写出魔方特效

    程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆 ...

  7. 用OpenGL简单编写的一个最简单贪吃蛇游戏

    刚学OpenGL的时候,写的一个最简单的贪吃蛇游戏代码 如下: //贪吃蛇游戏 #include<stdio.h> #include<stdlib.h> #include< ...

  8. 用C++实现的贪吃蛇游戏

    我是一个C++初学者,控制台实现了一个贪吃蛇游戏. 代码如下: //"贪吃蛇游戏"V1.0 //李国良于2016年12月29日编写完成 #include <iostream& ...

  9. JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。

    编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...

随机推荐

  1. Kbengine游戏引擎-【4】demo-kbengine_unity3d_demo 在容器docker上安装测试

    git地址:https://github.com/kbengine/kbengine_unity3d_demo Demo中文地址:https://github.com/kbengine/kbengin ...

  2. driver.implicitly_wait不起作用的排错方法

    环境是python3.6+selenium 3.4.3+chrome64 在编写前端自动化脚本时使用implicitly_wait时不起作用 1.确认自己是否正确使用,可用简单的例子来测试,比如: 此 ...

  3. PCL中有哪些可用的PointT类型(4)

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=269 PointWithViewpoint - float x, y, z, ...

  4. Spring配置文件里加载路径中的通配符

    ?代表匹配任意一个字符            *代表匹配0个或多个任意字符             **/匹配任意多个目录 classpath:app-Beans.xml 查找app-Beans.xm ...

  5. openstack核心组件--glance镜像（2）

    一.glance介绍:              Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚 ...

  6. Java Unsigned Bytes

    Having had to use unsigned bytes for the first time, I also had to learn how Java references these d ...

  7. Cell中实现多图展示

    实现的效果如下: 主要实现代码如下: // // DetailCell.m // Floral // // Created by 思 彭 on 16/9/21. // Copyright © 2016 ...

  8. laravel redis存数组并设置过期时间

    $data = [ 'zoneList'=>$zoneList, 'eqList' => $eqList, 'mdateList' => $mdateList ]; Redis::s ...

  9. Docker Windows

    docker windows 操作和linux上稍有些差异,主要是在启动容器时的命令参数 和 端口映射. 1.下载docker-toolbox http://mirrors.aliyun.com/do ...

  10. 李宏毅 Keras手写数字集识别（优化篇）

    在之前的一章中我们讲到的keras手写数字集的识别中,所使用的loss function为‘mse’,即均方差.那我们如何才能知道所得出的结果是不是overfitting?我们通过运行结果中的trai ...