HTML5 Canvas之猜数字游戏
主要的内容描述的是如何渲染一个矩形的边框和填充背景,以及文字.
代码中有详细的注释:
效果图:
以下是代码:
<!DOCTYPE html>
<html lang="cn">
<head>
<title>猜数字游戏示例</title>
<meta charset="gb2312">
<script type="text/javascript">
//@author 杨虹昌
//guess全局属性 GuessBean对象
var guess=null;
var context=null;//2d全局上下文 //检查浏览器是否支持canvas属性
function canvasSupport(){
return !!document.createElement("canvas").getContext;
} //dom加载完成后所执行的函数
function windowLoaded(){
canvasStart();
} //对日志对象的简单封装
var Debugger=(function(){
//输出日志信息
this.log=function(message){
try{
console.log(message);
}catch(e){ }
}
return this;
})(); // 定义游戏类实体
function GuessBean(){
this.today=null;//显示当前时间
this.guessNum=-1;//要猜的数字,初始为负数
this.pressNum=-1;//用户按下的数字,初始为负数代表是初始化状态
this.numGuessed;//用户已经猜过的数字
this.guesses=0;//记录用户猜过的次数
this.gameOver=false;//游戏是否已经结束
this.message="猜数字,数字从0-9.";//提示用户消息
this.hightOrLower="";
} //初始化游戏相关信息,并返回GuessBean对象
function initGame(){
Debugger.log("初始化游戏设置>>");
guess=new GuessBean();
guess.guessNum=Math.floor(Math.random()*10);//生成0-9的随机数
Debugger.log("此次生成的随机数:"+guess.guessNum);
guess.today=new Date();//获取当前日期
guess.guesses=0;//初始化猜的次数为0
guess.gameOver=false;
guess.hightOrLower="";
guess.numGuessed=[];
Debugger.log("绑定dom键盘按下事件.");
//添加事件绑定
window.addEventListener("keyup",listenerKeyPressed,true);
drawScreen();//执行渲染
} //canvas程序入口
function canvasStart(){
// 判断浏览器是否支持canvas
if(!canvasSupport()){
return;
}
//获取dom文档中id属性为"theCanvas"的元canvas素
var theCanvas=document.getElementById("theCanvas");
//获取2d上下文,注意:此处的2d只能是小写,大写不能获取此对象
context=theCanvas.getContext("2d");
Debugger.log("开始渲染>>");
initGame(); }
//完成屏幕渲染
function drawScreen(){
//
context.fillStyle="#ffffaa"; //设置填充颜色
context.fillRect(0,0,500,300); //创建一个矩形 //围绕图像以及文本绘制一个非填充的小方块,
context.strokeStyle="#000000"; //设置填充颜色
//绘制矩形边框,一下四个参数分别为:
//第一和第二个参数:左上角x,y坐标
//第三和第四个参数:右下角x,y坐标
context.strokeRect(5,5,490,290); //设置字体大小和字号
context.textBaseline="top"; //设置字体的垂直对齐方式 //日期
context.fillStyle="#000000"; //设置填充颜色
context.font="12px 隶书"; //设置字体大小和类型
//参数:
//第一个参数:渲染内容
//第二个参数:x轴
//第三个参数:y轴
context.fillText("时间:"+guess.today.toLocaleString(),20,10); // 消息
context.fillStyle="#ff0000"; //设置填充颜色
context.font="14px 隶书"; //设置字体大小和类型
context.fillText("消息:"+guess.message,250,10); //
context.fillStyle="#109910";
context.font="16px 隶书";
context.fillText("Guesses:"+guess.guesses,250,30); //
context.fillStyle="#000000";
context.font="23px 隶书";
context.fillText("Higher or Lower:"+guess.hightOrLower,30,125); //
context.fillStyle="#ff0000";
context.font="18px 隶书";
context.fillText("Num Guessed:"+guess.numGuessed,10,260); //游戏结束
if(guess.gameOver){
context.fillStyle="#ff0000";
context.font="40px 隶书";
context.fillText("恭喜你,答对了!",150,180);
}
} //处理键盘按下事件
function listenerKeyPressed(e){
//游戏结束
if(guess&&guess.gameOver){
Debugger.log("游戏结束.>>");
return;
}
var digit=String.fromCharCode(e.keyCode);
guess.guesses++;//猜的次数加1
guess.numGuessed.push(digit);//记录猜的值
//判断是否与对应的随机值相等
if(parseInt(digit)===guess.guessNum){
guess.gameOver=true;//游戏结束
}else{
//判断是否是数字
if((/^\d$/.test(digit))){
if(parseInt(digit)>guess.guessNum){
guess.hightOrLower="大了.";
}else{
guess.hightOrLower="小了.";
}
}else{
guess.hightOrLower="您按下的不是一个数字.";
}
}
drawScreen();//渲染
}
//添加事件监听
window.addEventListener("load",windowLoaded,false);
</script>
</head>
<body>
<canvas id="theCanvas" width="500" height="300">
<!-- 这个里面是写当不支持canvas时候的提示信息-->
浏览器不支持html5 canvas ,建议使用chrome 或者FF
</canvas>
</body>
</html>
源码地址: https://code.csdn.net/yhc13429826359/html5_canvas_demo
HTML5 Canvas之猜数字游戏的更多相关文章
- C语言猜数字游戏
猜数字游戏,各式各样的实现方式,我这边提供一个实现方式,希望可以帮到新手. 老程序猿就不要看了,黑呵呵 源代码1 include stdio.h include stdlib.h include ti ...
- 不一样的猜数字游戏 — leetcode 375. Guess Number Higher or Lower II
好久没切 leetcode 的题了,静下心来切了道,这道题比较有意思,和大家分享下. 我把它叫做 "不一样的猜数字游戏",我们先来看看传统的猜数字游戏,Guess Number H ...
- java 猜数字游戏
作用:猜数字游戏.随机产生1个数字(1~10),大了.小了或者成功后给出提示. 语言:java 工具:eclipse 作者:潇洒鸿图 时间:2016.11.10 >>>>> ...
- 【原创Android游戏】--猜数字游戏Version 0.1
想当年高中时经常和小伙伴在纸上或者黑板上或者学习机上玩猜数字的游戏,在当年那个手机等娱乐设备在我们那还不是很普遍的时候是很好的一个消遣的游戏,去年的时候便写了一个Android版的猜数字游戏,只是当时 ...
- 【原创Android游戏】--猜数字游戏V1.1 --数据存储，Intent，SimpleAdapter的学习与应用
--------------------------------------------------------------- V0.1版本 上次做完第一个版本后,发现还有一些漏洞,并且还有一些可以添 ...
- python学习笔记 ——python写的猜数字游戏 002
from sys import exit import random def Arrfor(str): #CONTST = CONTST + 1 artificial = input("请输 ...
- 用MFC完成一个简单的猜数字游戏: 输入的四位数中，位置和数字都正确为A，数字相同而位置不同的为B。
最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...
- C语言之猜数字游戏
猜数字游戏 猜数字游戏是以前功能机上的一款益智游戏,计算机会根据输入的位数随机分配一个符合要求的数据,计算机输出guess后便可以输入数字,注意数字间需要用空格或回车符加以区分,计算机会根据输入信息给 ...
- c语言-猜数字游戏
#include <stdio.h> #include <stdlib.h> int top(); int input(); void main() { ; int numbe ...
随机推荐
- java的按值传递与按引用传递
还是比较混乱 主要看怎么理解了 java没有指针一说是因为jvm将指针给隐藏了起来 说到底还是靠地址 按值传递显然直接将内存空间的内容传递给对方 之后再与传递者无关 引用是在栈空间建一个堆空间对象的映 ...
- 用PHP收发邮件
注:在WinForm下怎么试都不好使,最后没办法换成了PHP下,一试就好使了. 这里用到了phpmailer组件,网上有下. 转:phpnow支持ssl的方法 原文出处:http://blog.163 ...
- Float IP设置
浮动IP: 在做双机的时候,设定的一个IP,通过访问这个IP,具体到后台哪台机器,由系统指定. 浮动IP是随资源一起走的. 就是由软件根据具体情况把该IP设置在某一台机器上,对外提供服务 为了避免因为 ...
- CFGym 101490J 题解
一.题目链接 http://codeforces.com/gym/101490 二.题面 三.题意 给你n个点,代表学生所在位置,n个点,代表老师所在位置.每个学生分配一个老师.让你找出一个最小的学生 ...
- FoxPro 数据库文件及记录命令
ADDTABLE 在当前数据库中添加一个自由表 APPEND 在表的末尾添加一个或多个新记录 APPEND FROM ARRAY 由数组添加记录到表中 APPEND FROM 从一个文件中读入记录,追 ...
- Java Graphics 2D绘制图片 在Liunx上乱码
绘图的代码工具类 package com.gwzx.framework.captcha; import java.awt.Color; import java.awt.Font; import jav ...
- C# 6.0可能的新特性及C#发展历程[转]
C# 6.0可能的新特性及C#发展历程[转] 年10月份发布了,对应的是.Net Franework 4.5.1. 或者3年,更新增加的东西会比较多,所以对于C# 6.0,还是有一些期待的. 下面 ...
- ajax的post请求方式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Python Modules
[Python Modules] 1. a module is a python source file. 2. a package is a directory with a __init__.py ...
- Gtk-WARNING **: cannot open display: :0.0之解决
当使用su 到另外一个用户运行某个程序,而这个程序又要有图形显示的时候,就有可能有下面提示: root@dt:~# sudo -i -u keji google-chrome No protocol ...