游戏进行页面展示

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. grivaty,margin和padding的区别

    layout_margn是指组件距离父窗体的距离, padding是指组件中的内容距离组件边缘的距离 Layout_grivaty与grivaty的区别 layout_grivaty是指组件相对父窗体 ...

  2. 图片滚动js代码

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. xshell一些简单的使用---1

    1.下载本地window中 2.在sftp模式下输入:put会打开xshell下载到window的位置目录

  4. Hive的内部表和外部表

  5. Linux服务器端使用tcpdump抓redis报文

    yum update yum install tcpdump tcpdump host -i ens192 -w /tmp/redis-zsetcapture.cap 其中ens192是网卡名, /t ...

  6. .Netcore 2.0 Ocelot Api网关教程（1）- 入门

    Ocelot(Github)Ocelot官方文档(英文)本文不会介绍Api网关是什么以及Ocelot能干什么需要对Api网关及Ocelot有一定的理论了解 开始使用Ocelot搭建一个入门级Api网关 ...

  7. PHP学习（4）——数组的使用

    1.数组的概念 数组就是一个用来存储一系列变量值的命名区域. 每个数组元素有一个相关的索引(也成为关键字),它可以用来访问元素. PHP允许间隔性地使用数字或字符串作为数组的索引. 2.数字索引数组 ...

  8. element-ui--按需引入

    参考链接:https://www.cnblogs.com/qiezuimh/p/10103522.html

  9. day33 网络编程之UDP与进程了解

    UDP 什么是UDP协议 在上节课的练习中,使用TCP进行网络编程时,我们会遇到粘包问题,这是因为TCP是流式协议,而今天学习的UDP协议不是流式协议,其发送的数据是数据报格式的,在进行数据发送时该协 ...

  10. vue 新闻列表滚动效果

    效果如下: <template> <div> <div class="scroll-wrap"> <ul class="scro ...