<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>猜数</title>

 </head>

 <body>

 <canvas id="box" width="500" height="300"></canvas>

 <form>

 <input type="text" id="guessValue" placeholder="port Canvas Image">

 <button id="createImageData">猜猜看?!</button>

 </form>

 <script>

 var guesses = 0;

 var message = "Guess the letter from a(lower) to Z(higher)";

 var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

 var today = new Date();

 var letterToGuess = '';

 var higherOrLower='';

 var letterGuessed;

 var gameOver = false;

 function initGame() {

     var letterIndex = Math.floor(Math.random() * letters.length);

     letterToGuess = letters[letterIndex];

     guess = 0;

     letterGuessed = [];

     gameOver = false;

     window.addEventListener("keydown", eventKeyPressed, true);

     drawScreen();

     var formElement = document.querySelector("#createImageData");

     formElement.addEventListener("click",createImageDataPressed,false);

 }

 function eventKeyPressed(e){

     if(!gameOver) {

         var letterPressed = String.fromCharCode(e.keyCode);

         letterPressed = letterPressed.toLowerCase();

         guesses++;

         letterGuessed.push(letterPressed);

         if (letterPressed == letterToGuess) {

             gameOver = true;

         } else {

             letterIndex = letters.indexOf(letterToGuess);

             guessIndex = letters.indexOf(letterPressed);

             console.log(guessIndex);

             if (guessIndex < 0) {

                 higherOrLower = "That is not a letter!"

             } else if (guessIndex > letterIndex) {

                 higherOrLower = "Lower";

             } else {

                 higherOrLower = "higher";

             }

         }

          drawScreen();

     }

 }

 var canvas = document.querySelector("#box");

 var ctx = canvas.getContext("2d");

 function drawScreen(){

     //背景

     ctx.fillStyle = "#ffffaa";

     ctx.fillRect(0,0,500,300);

     //边框

     ctx.strokeStyle = "#000000";

     ctx.strokeRect(5,5,490,290);

     ctx.textBaseline = "top";

     //日期

     ctx.fillStyle = "#000000";

     ctx.font = "10px Sans-Serif";

     ctx.fillText(today,150,10);

     //消息

     ctx.fillStyle = "#ff0000";

     ctx.font = "14px Sans-serif";

     ctx.fillText(message,125,30);

     //猜的次数

     ctx.fillStyle = "#109910";

     ctx.font = "16px Sans-serif";

     ctx.fillText("guess: "+guesses+"次！",215,50);

     //显示higher或lower

     ctx.fillStyle = "#000";

     ctx.font = "16px Sans-Serif";

     ctx.fillText("Higher or Lower: "+higherOrLower,150,125);

     //猜过的字母

     ctx.fillStyle = "#ff0000";

     ctx.font = "16px Sans-Serif";

     ctx.fillText("Letters Guessed: "+letterGuessed.toString(),10,260);

     if(gameOver){

         ctx.fillStyle = "#ff0000";

         ctx.font = "40px _sans-serif";

         ctx.fillText("You got it!",150,180);

     }

 }

 function createImageDataPressed(e){

 window.open(canvas.toDataURL(),"canvasImage","left=0,top=0,width="+canvas.width +",height="+canvas.height +",toolbar=0,resizeable=0");

 }

 initGame();

 </script>

 </body>

 </html>

canvas猜数游戏的更多相关文章

  1. 【BZOJ 1594】 [Usaco2008 Jan]猜数游戏 (二分+并查集)

    1594: [Usaco2008 Jan]猜数游戏 Description 为了提高自己低得可怜的智商,奶牛们设计了一个新的猜数游戏,来锻炼她们的逻辑推理能力. 游戏开始前,一头指定的奶牛会在牛棚后面 ...

  2. usaco 猜数游戏

    Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...

  3. （一）Python之猜数游戏

    猜数游戏由简如深的编码学习过程: 3次机会: print('------------------我爱鱼C工作室------------------')count=0while count < 3 ...

  4. 猜数游戏-flag的运用

    package my;import java.util.Scanner;public class MyJava {        public static void main(String[] ar ...

  5. Java课程设计——猜数游戏（201521123111 陈伟泽）

    Java课程设计--猜数游戏(201521123111 陈伟泽) 1.团队课程设计博客链接 博客作业--猜数游戏 2.个人负责模块或任务说明 Answer:一些基础界面的构造,排行榜的构造,用文件录入 ...

  6. JAVA课程设计 猜数游戏 团队

    团队名称,成员介绍 名称: 猜数游戏 成员: 网络1514 201521123086 周颖强 网络1514 201521123087蒋勃超 项目git地址 git.oschina.net/jbc113 ...

  7. BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法，傻逼题，猜结论】

    2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 604  Solved: 260[Submit][Status ...

  8. 从scratch到python——猜数游戏

    ` 之前讲解了从scratch到python,基于python turtle库的实现,讲解了用scratch和python turtle绘图的实现,以及让小猫动起来和当角色被单击的例子. 本节课讲继续 ...

  9. VBS猜数游戏

    VBS 猜数游戏 2018-11-09  21:19:11 by xutao msgbox "The Swami" ,,"Game" msgbox " ...

随机推荐

  1. 動態修改 XML 欄位

    /* -- for test DECLARE @content VARCHAR(50) DECLARE @folioId VARCHAR(50) DECLARE @opinionType VARCHA ...

  2. Android-自定义仿QQ列表Item滑动

    效果图: 布局中去指定自定义FrameLayout: <!-- 自定义仿QQ列表Item滑动 --> <view.custom.shangguigucustomview.MyCust ...

  3. Spring AOP 简单入门笔记 （转）

    分享一个自己写的最为简单的Spring AOP的应用,其实,本人也是学习Spring不久,只是把一些个人的理解分享下,供参考.可能很多人刚开始不太理解到底啥是AOP,其实它也是相对 OOP来说的,类似 ...

  4. VS2017新建控制器出现 No executable found matching command: dotnet-asp net-code generator解决办法

    编辑项目.csproj的文件,里面加上如下节点保存即可:  <ItemGroup>    <DotNetCliToolReference Include="Microsof ...

  5. javacript 实现瀑布流原理和效果, 滚动加载图片【图文解析 附源码】

    先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pin ...

  6. await使用中的阻塞和并发（二）

    本文继续上篇未完成的讨论,通过将Lambda还原成最普通的代码段,来解释上篇提出的疑问.并更正上篇中一些不太正确的写法.最后会给出无需等待Async方法返回值时,对Async方法使用await的建议, ...

  7. C博客第01次作业---顺序，分支结构

    1.本章学习总结 1.1 思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 经过了这一周的学习,从一开始对C语言一无所知,到现在能够写出基本的代码,感到非常开心. 学习C语言也并非想象 ...

  8. mysql--视图,触发器,事务,存储过程

    一.视图 视图是一个虚拟表(非真实存在),是跑到内存中的表,真实表是硬盘上的表,怎么就得到了虚拟表,就是你查询的结果,只不过之前我们查询出来的虚拟表,从内存中取出来显示在屏幕上,内存中就没有了这些表的 ...

  9. Ubuntu16.04 - 怎么能够更好设置PATH变量，便于管理？

    “/etc/profile”是linux里面的全局变量设置文件,加入这里的PATH变量,全局都可以使用,非常方便.加入时候很简单了,直接在PATH末尾加入":+要加入的变量"就可以 ...

  10. GO学习笔记 - 数据类型转换

    官方教程:https://tour.go-zh.org/basics/13 表达式 T(v) 将值 v 转换为类型 T . 一些关于数值的转换: var i int = 42 var f float6 ...