HTML+CSS+JS实现的贪吃球小游戏【转】
转载地址：【https://blog.csdn.net/qq_43115104/article/details/84228987】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃球大作战</title>
<style>
#d01{
width: 606px;
margin: 20px auto;
}
#c01{
border-top: 3px solid #80ffff;
border-right: 3px solid #00ff00;
border-bottom: 3px solid #ff0000;
border-left: 3px solid #ff8080;
background-color: black;
}
#d02{
width: 606px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
font-size:12px;
font-style: italic;
}
#i01{
display: block;
margin-left: 200px;
float: left;
}
#i02{
display: block;
margin-right: 200px;
float: right;
}
</style>
</head>
<body onkeydown="doKeyDown(event)">
<div id="d01">
<canvas id="c01" width="600" height="500"></canvas><!--画布-->
<div id="d02"></div><!--提示框-->
<input type="button" value="重新开始" onClick="rest()" id="i01">
<input type="button" value="游戏说明" onClick="explain()" id="i02">
</div>
<script type="text/javascript">
var canvas = document.getElementById("c01");
var context = canvas.getContext("2d");
var tooltip = document.getElementById("d02");
var Serpengo = {//红色贪吃球
"x" : 100,
"y" : 100,
"r" : 8,
"color" : "red"
}
var Circle = {//蓝色小球
"x" : 50,
"y" : 50,
"r" : 4,
"color" : "blue"
}
var Rect = {//绿色方块
"x" : 200,
"y" : 200,
"width" : 8,
"height" : 8,
"color" : "green"
}
function rest() {//重置
Serpengo.r = 8;
draw();
drawFood();
}
function draw() {
var width = 600;
var height = 500;
//清空画布
context.clearRect(0, 0, width, height);
//绘制贪吃球
context.fillStyle = Serpengo.color;
context.beginPath();
context.arc(Serpengo.x, Serpengo.y, Serpengo.r, 0, Math.PI * 2, true);
context.fill();
}
window.addEventListener("load", draw, true);
function doKeyDown(event) {
var flag=false;//接触旗帜
switch (event.keyCode) {
case 38://上键头
if(Serpengo.y<=0) {//边界判断
break;
}
Serpengo.y -= 4;
draw();
break;
case 40://下键头
if(Serpengo.y>=500) {//边界判断
break;
}
Serpengo.y += 4;
draw();
break;
case 37://左键头
if(Serpengo.x<=0) {//边界判断
break;
}
Serpengo.x -= 4;
draw();
break;
case 39://右箭头
if(Serpengo.x>=600) {//边界判断
break;
}
Serpengo.x += 4;
draw();
break;
}
if ((Serpengo.x - Circle.x) * (Serpengo.x - Circle.x)
+ (Serpengo.y - Circle.y) * (Serpengo.y - Circle.y) <= (Serpengo.r + Circle.r)
* (Serpengo.r + Circle.r)) {//判断红色贪吃球与蓝色小球是否接触
circleRandom();
Serpengo.r += 2;
flag=true;
}
if ((Serpengo.x - Rect.x) * (Serpengo.x - Rect.x)
+ (Serpengo.y - Rect.y) * (Serpengo.y - Rect.y) <= (Serpengo.r + 6)
* (Serpengo.r + 6)) {//判断红色贪吃球与绿色方块是否接触
rectRandom();
Serpengo.r += 2;
flag=true;
}
if (Serpengo.r > 200) {//贪吃球上限设置
Serpengo.r = 200;
}
if(flag){//接触到了就重画
draw();
}
drawFood();
}
function drawFood() {
drawCircle();
drawRect();
}
function drawCircle() {
context.fillStyle = Circle.color;
context.beginPath();
context.arc(Circle.x, Circle.y, Circle.r, 0, Math.PI * 2, true);
context.fill();
}
window.addEventListener("load", drawCircle, true);
function circleRandom() {
Circle.x = Math.random();
Circle.x = Math.ceil(Circle.x * 600);
Circle.y = Math.random();
Circle.y = Math.ceil(Circle.y * 500);
}
function drawRect() {
context.fillStyle = Rect.color;
context.beginPath();
context.rect(Rect.x, Rect.y, Rect.width, Rect.height);
context.fill();
}
window.addEventListener("load", drawRect, true);
function rectRandom() {
Rect.x = Math.random();
Rect.x = Math.ceil(Rect.x * 600);
Rect.y = Math.random();
Rect.y = Math.ceil(Rect.y * 500);
}
var showhelp = false;
function explain() {
showhelp = !showhelp;
if (showhelp) {
tooltip.innerHTML = "用键盘的上、下、左、右键移动红色贪吃球，吃掉蓝色小球或者绿色方块，可以让红色贪吃球变大，直到红色贪吃球半径大至所设置的上限。";
} else {
tooltip.innerHTML = "贪吃球大作战";
}
}
</script>
</body>
</html>
HTML+CSS+JS实现的贪吃球小游戏【转】的更多相关文章
- html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏 一.总结 一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
- 用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- JS练习实例--编写经典小游戏俄罗斯方块
最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也 ...
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- js实现简单的俄罗斯方块小游戏
js实现简单的俄罗斯方块小游戏 开始 1. 创建一个宽为 200px,高为 360px 的背景容器 <!DOCTYPE html> <html lang="en" ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
- Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ...
随机推荐
- Lecture3
Smiling & Weeping ---- 蝴蝶在双翼里藏匿夏的脉络 妄图在绿意中品鉴隆冬 第三章 Git分支管理 3.1 分支的简介 Git最重要的运用场景是多人协同开发,但是如何能保证每 ...
- 结构型模式（Structural Pattern）
模式介绍 结构型模式(Structural Pattern)的主要目的就是将不同的类和对象组合在一起,形成更大或者更复杂的结构体.该模式并不是简单地将这些类或对象摆放在一起,而是要提供它们之间的关联方 ...
- .NET 中使用RabbitMQ初体验
在.NET Core中使用RabbitMQ 前言 逛园子的时候看到一篇.NET 学习RabbitMq的文章(视频地址和文章地址放在文章底部了),写的不错,我也来实现一下. 我是把RabbitMQ放在服 ...
- TI AM62x工业开发板规格书（单/双/四核ARM Cortex-A53 + 单核ARM Cortex-M4F，主频1.4GHz）
1 评估板简介 创龙科技TL62x-EVM是一款基于TI Sitara系列AM62x单/双/四核ARM Cortex-A53 + 单核ARM Cortex-M4F多核处理器设计的高性能低功耗工业评估板 ...
- 典型性相关分析在SPSS中的实现
典型性相关分析是研究两组变量(每组变量中都可能有多个指标)之间相关关系的一种多元统计方法.它能够揭示出两组变量之间的内在联系. 本文着重模型在spss中的应用,通过一道例题解释各个指标的意义.详细推导 ...
- Django生成数据库表时报错 __init__() missing 1 required positional argument: 'on_delete'
原因: 在django2.0后,定义外键和一对一关系的时候需要加上on_delete选项,此参数为了避免两个表里的数据不一致问题,不然会报错 例如: owner=models.ForeignKey(U ...
- Mac 设置多个版本JDK
控制台: p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1) } span.s1 { font-variant-ligatures: ...
- Vulnhub-ICA01
简介 名称:ICA: 1 发布日期:2021 年 9 月 25 日 难度:容易 描述:根据我们情报网络的信息,ICA 正在开展一个秘密项目.我们需要弄清楚这个项目是什么.获得访问信息后,请将其发送给我 ...
- Windows 10 LTSC中个人版OneDrive失效的问题
该问题是由于LTSC注册表无onedriver的id{A52BBA46-E9E1-435f-B3D9-28DAA648C0F6}定义导致,解决方案是新建一个reg_onedrive.reg文件,并编辑 ...
- webgl智慧楼宇发光系列之线性采样下高斯模糊
目录 webgl智慧楼宇发光系列之线性采样下高斯模糊 效率问题 线性采样 代码讲解 总结 参考文档 webgl智慧楼宇发光系列之线性采样下高斯模糊 前面一篇文章 <webgl智慧楼宇发光效果算法 ...